<script setup lang="tsx">
import { ref } from 'vue';
import QueryBox from '@/components/queryBox/index.vue';
import { SearchIcon } from 'tdesign-icons-vue-next';
import { getTree } from '@/api/member/relation';

const data = ref([]);

interface FormDataType {
  uid: string | number | null;
  userName: string | null;
}
const INITIAL_QUERYFORM: FormDataType = {
  uid: undefined,
  userName: undefined,
};
const queryForm = ref({ ...INITIAL_QUERYFORM });
const render = () => (
  <>
    <QueryBox onReset={onReset} onSearch={unGetTree}>
      <t-input v-model={queryForm.value.uid} placeholder="UID" style="width: 240px;">
        {{
          prefixIcon: () => <SearchIcon />,
        }}
      </t-input>
      <t-input v-model={queryForm.value.userName} placeholder="账户" style="width: 240px;">
        {{
          prefixIcon: () => <SearchIcon />,
        }}
      </t-input>
    </QueryBox>
  </>
);

const unGetTree = async () => {
  try {
    loading.value = true;
    const res = await getTree(queryForm.value);
    data.value = res.data;
    loading.value = false;
    console.log(loading.value);
  } catch (e) {
    console.log(e);
  }
};

const onReset = () => {
  queryForm.value = { ...INITIAL_QUERYFORM };
  unGetTree();
};

const showLine = ref(true);
const activable = ref(true);
const activeMultiple = ref(true);
const expandOnClickNode = ref(true);
const loading = ref(false);
</script>

<template>
  <div>
    <render />
    <div class="treeBox">
      <t-space style="margin-bottom: 10px">
        <span>显示连线:</span>
        <t-switch v-model="showLine" />
        <span>节点可高亮: </span>
        <t-switch v-model="activable" />
        <span>节点可多选高亮:</span>
        <t-switch v-model="activeMultiple" />
        <span>点击整个节点可展开:</span>
        <t-switch v-model="expandOnClickNode" />
      </t-space>
      <t-loading size="26px" :loading="loading" show-overlay>
        <t-tree
          empty="暂无数据, 请搜索"
          :expandLevel="2"
          :data="data"
          :activable="activable"
          :active-multiple="activeMultiple"
          :expand-on-click-node="expandOnClickNode"
          :line="showLine"
          :keys="{ value: 'id', label: 'title' }"
          hover
        />
      </t-loading>
    </div>
  </div>
</template>

<style lang="less" scoped>
.treeBox {
  display: block;
  background-color: #fff;
  padding: 24px;
  margin-bottom: 24px;
}
</style>
